<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <script type="text/javascript" th:inline="javascript"></script>
    <meta charset="UTF-8"/>
    <title>彩蛋</title>
    <link rel="shortcut icon" href="../static/images/bitbug_favicon.ico" />
    <style>
        * {
            padding: 0px;
            margin: 0px;
        }

        body {
            background: #000;
            -webkit-box-reflect: below 3px -webkit-linear-gradient(top, rgba(0, 0, 0, 0) 40%, rgba(0, 0, 0, 0.5));
        }

        #photos {
            width: 110px; /*宽度*/
            height: 180px; /*高度*/
            /*border: 1px solid #ccc; !*加一个灰色边框*!*/
            margin: 160px auto; /*水平居中，高度距离顶部100px*/
            transform: rotateY(0deg);
            transform-style: preserve-3d;
            transform: rotateX(-10deg);

        }

        #photos img {
            width: 100%;
            height: 100%;
            position: absolute;
            box-shadow: 0 0 8px #eaeaea;
            box-shadow: 1px -1px 6px #666;
            border-radius: 4px;
            -webkit-box-reflect: below 3px -webkit-linear-gradient(top, rgba(0, 0, 0, 0) 40%, rgba(0, 0, 0, 0.5));
            cursor: pointer;
        }

        #photos div {
            width: 1200px;
            height: 1200px;
            border-radius: 50%;
            position: absolute;
            top: 102%;
            left: 50%;
            margin-left: -600px;
            margin-top: -600px;
            transform: rotateX(90deg);
            background: -webkit-radial-gradient(center center, 600px 600px, rgba(158, 158, 222, 0.5), rgba(0, 0, 0, 0));
        }
    </style>
</head>
<body>
<div style="perspective: 800px;">
    <div id="photos">
        <span th:each="item,itemStat : ${pictureList}">
            <img th:src="${item.picUrl}"/>
        </span>
        <div></div>
    </div>
</div>
</body>

<script>
    var photosDom = document.getElementById('photos');
    //获取图片数组
    var images = photosDom.getElementsByTagName('img');
    //获取图片数量
    var len = images.length - 1;
    //计算每张图片按Y轴旋转的角度
    var deg = Math.floor(360 / len);
    /*<![CDATA[*/
    for (var i = 0; i < len; i++) {
        images[i].style = 'transform : rotateY(' + (deg * i) + 'deg) translateZ(380px)'; //deg前面不要加空格
    }
    ;
    /*]]>*/
    var x = 0;
    setInterval(function () {
        photosDom.style.transform = "rotateX(-10deg) rotateY(" + (x++) * 0.2 + "deg)";
    }, 30);
</script>
</html>